<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.container .imgList>li>img {
				width: 100px;
				height: 300px;
			}
			
			.container .imgList>li {
				list-style: none;
			}
			
			.container .imgList {
				width: 100px;
				height: 700px;
				/*超出范围，出现滚动条*/
				overflow: scroll;
				float: left;
			}
			
			.container .currentImg {
				width: 400px;
				height: 700px;
				float: left;
				position: relative;
			}
			
			.container .currentImg >img {
				width: 400px;
				height: 700px;
			}
			
			.container .currentImg .block {
				width: 100px;
				height: 200px;
				background-color: rgba(255, 255, 255, 0.5);
				position: absolute;
				top: 0;
				left: 0;
			}
			
			.container .currentImg .currentImgOver {
				 width: 400px;
				 height: 700px;
				 position: absolute;
				 top: 0;
				 left: 0;
			}
			
			
			.container .bigImg {
				width: 400px;
				height: 700px;
				float: left;
				overflow: hidden;
				position: relative;
				margin-left: 200px;
			}
			/*放大四倍*/
			
			.container .bigImg>img {
				width: 400%;
				height: 400%;
				position: absolute;
				top: 0;
				left: 0;
			}
		</style>
	</head>

	<body>

		<!--640*1136-->
		<div class="container">
			<ul class="imgList">
				<li><img src="imgBig/001.jpg" /></li>
				<li><img src="imgBig/002.jpg" /></li>
				<li><img src="imgBig/003.jpg" /></li>
				<li><img src="imgBig/004.jpg" /></li>
				<li><img src="imgBig/005.jpg" /></li>
				<li><img src="imgBig/006.jpg" /></li>
				<li><img src="imgBig/007.jpg" /></li>
				<li><img src="imgBig/008.jpg" /></li>
			</ul>
			<div class="currentImg">
				<img src="imgBig/001.jpg" />
				<div class="block">
				</div>
				<!--监听currentImgOver-->
				<div class="currentImgOver">
				</div>
			</div>
			<div class="bigImg">
				<img src="imgBig/001.jpg" />
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var leftImgs = document.querySelectorAll(".imgList>li>img");
//		var currentImgDiv = document.querySelector(".currentImg");
        var currentImgDiv = document.querySelector(".currentImg .currentImgOver");
		var currentImg = document.querySelector(".currentImg>img");
		var bigImg = document.querySelector(".bigImg>img");
		var block = document.querySelector(".currentImg .block");
		for (var i = 0; i < leftImgs.length; i++) {
			leftImgs[i].addEventListener("click", function(e) {
				//获取被点击的img的src给当前显示img的src
				//e.target代表当前被点击的标签
				currentImg.src = e.target.src;
				//最右边的大图也要换
				bigImg.src = e.target.src;
			});
		}
		currentImgDiv.addEventListener("mouseenter", function(e) {
			block.style.display = "block";
			bigImg.style.display = "block";
		});
		currentImgDiv.addEventListener("mouseleave", function(e) {
			block.style.display = "none";
			bigImg.style.display = "none";
		});
		//screenX
		//pageX
		//clenitX
		//offsetX
		currentImgDiv.addEventListener("mousemove", function(e) {
         
               var  x = e.offsetX - block.offsetWidth/2;
               var  y = e.offsetY - block.offsetHeight/2;
               block.style.left=x+"px";
               block.style.top=y+"px";
           
             //防止出区域
             //block left>0 && left< 父元素-自己的宽度  ,  top>0 && <父元素-自己的高度
             //左
             if(parseInt(block.style.left)<0){
             	 block.style.left="0px";
             }
             //上
             if(parseInt(block.style.top)<0){
             	block.style.top="0px";
             }
             //右
             var  maxWidth=currentImgDiv.offsetWidth-block.offsetWidth;
             if(parseInt(block.style.left)>maxWidth){
             	block.style.left=maxWidth+"px";
             }
             //下
             var maxHeight = currentImgDiv.offsetHeight - block.offsetHeight;
             if (parseInt(block.style.top) > maxHeight) {
             	block.style.top = maxHeight +"px";
             }
             //最右边的放大图
             //原理：大图移动的距离是小图的n倍。n = 大图/小图
             //方向是反的。
             var n =bigImg.offsetWidth/currentImgDiv.offsetWidth;
             bigImg.style.left = -parseInt(block.style.left) * n +"px";
             bigImg.style.top  = -parseInt(block.style.top) * n+"px";
             
             

		});
		
		
	</script>

</html>